import { useState } from 'react'
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from "react-router-dom"
import { loginApi } from '../apis/users';
export default function Login() {
    const Navigate = useNavigate()
    const [loading, setLoading] = useState(false)




    const onFinish =  (values) => {
        setLoading(true)
        loginApi(values).then(res => {
            localStorage.token = res.token
            localStorage.permissions = JSON.stringify(res.permissions)
            localStorage.userInfo = JSON.stringify(res.userInfo)
            message.success('登录成功')
            setLoading(false)
            Navigate("/nav")
        }).catch(error=>{
            console.log(error);
            setLoading(false)
        })

        // const response = await fetch('http://jacklv.cn/users/login', {
        //     method: 'POST',
        //     body: JSON.stringify(values),
        //     headers: {
        //         'Content-Type': 'application/json',

        //     },
        // });
        // response.json().then(res => {
        //     console.log(res);
        //     if (res.code) {
        //         localStorage.token = res.data.token
        //         localStorage.permissions = JSON.stringify(res.data.permissions)
        //         localStorage.userInfo = JSON.stringify(res.data.userInfo)
        //         message.success('登录成功')
        //         setLoading(false)
        //         Navigate("/nav")
        //     } else {
        //         message.error(res.msg)
        //         setLoading(false)
        //     }
        // });
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className='login'>

            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    width: '600px',
                }}

                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label={<div style={{ color: '#fff' }}>username</div>}
                    name="account"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label={<div style={{ color: '#fff' }}>password</div>}
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>



                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit" loading={loading}>
                        Submit
                    </Button>
                </Form.Item>
            </Form>


        </div>
    )
}
